<template>
  <a-modal
    title="导入数据"
    width="800px"
    :visible="visible"
    centered
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning">
      <div class="import-wrapper">
        <define-data ref="importDefineData" @success="handleImportSuccess" @load-define="handleLoadDefine"/>
        <a-divider orientation="left">
          <span style="color: rgba(0, 0, 0, 0.4)">数据预览</span>
          <span>
          <a-button type="link" :icon="editHeader ? 'save' : 'edit'" @click="editTableHeader">
            {{ editHeader ? '保存表头' : '编辑表头' }}
          </a-button>
        </span>
        </a-divider>
        <upload-data-table :visible="true" :edit-header="editHeader" @update="$refs.importDefineData.init(record)" ref="importDataPreview"/>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="$refs.importDefineData.doSave()">导入</a-button>
    </template>
  </a-modal>
</template>

<script>
import defineData from "@/views/main/tsdatarecord/modal/defineData";
import uploadDataTable from "@/views/main/tsdatarecord/modal/uploadDataTable";
export default {
  name: "importData",
  components: {
    defineData,
    uploadDataTable
  },
  data() {
    return {
      visible: false,
      editHeader: false,
      record: {},
      spinning: false
    }
  },
  methods: {
    init(record) {
      this.record = record
      this.visible = true
      this.spinning = true
      this.$nextTick(() => {
        this.$refs.importDefineData.init(record)
        this.$refs.importDataPreview.init(record.id)
      })
    },
    handleCancel() {
      this.visible = false
      this.spinning = false
      this.editHeader = false
    },
    editTableHeader() {
      this.editHeader = !this.editHeader
      if (!this.editHeader) {
        this.$refs.importDataPreview.save()
      }
    },
    handleImportSuccess() {
      this.handleCancel()
      this.$emit('ok')
    },
    handleLoadDefine() {
      this.spinning = false
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="less">
.import-wrapper {
  padding-right: 5px;
  height: 500px;
  overflow-y: auto;
}
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  //background-color: #8c8c8c;
  background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
</style>
